<template>
  <div class="cart-wrapper">
    <nav-bar class="nav-bar">
      <div slot="center">购物车({{getCartList.length}})</div>
    </nav-bar>
    <cart-list />
    <cart-bottom-info class="cart-bottom-info" />
  </div>
</template>

<script>
import NavBar from "components/common/navbar/NavBar.vue";
import CartList from "./childComps/CartList.vue";
import CartBottomInfo from './childComps/CartBottomInfo.vue';
import { mapGetters } from 'vuex'
export default {
  name: "Cart",
  components: {
    NavBar,
    CartList,
    CartBottomInfo,
  },
  computed:{
    ...mapGetters(['getCartList'])
  }
  
};
</script>

<style scoped>
.cart-wrapper {
  background-color: #f5f5f5;
  height: 100vh;
  overflow: hidden;
}
.nav-bar {
  background-color: var(--color-high-text);
  color: #fff;
  position: fixed;
  z-index: 10;
  width: 100%;
}
.cart-bottom-info {
  position: fixed;
  bottom: 49px;
  height: 40px;
  width: 100%;
  z-index: 9;
}
</style>